<template>
  <div class="demo">
    <div class="demo-title">校验其他组件</div>
    <div class="demo-content">
      <Form
        :model="formState"
        name="validate_other"
        v-bind="formItemLayout"
        @finish-failed="onFinishFailed"
        @finish="onFinish"
      >
        <Form.Item label="Plain Text">
          <span class="ant-form-text">China</span>
        </Form.Item>
        <Form.Item
          name="select"
          label="Select"
          has-feedback
          :rules="[{ required: true, message: 'Please select your country!' }]"
        >
          <Select v-model:value="formState.select" placeholder="Please select a country">
            <Select.Option value="china">China</Select.Option>
            <Select.Option value="usa">U.S.A</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item
          name="select-multiple"
          label="Select[multiple]"
          :rules="[
            { required: true, message: 'Please select your favourite colors!', type: 'array' },
          ]"
        >
          <Select
            v-model:value="formState['select-multiple']"
            mode="multiple"
            placeholder="Please select favourite colors"
          >
            <Select.Option value="red">Red</Select.Option>
            <Select.Option value="green">Green</Select.Option>
            <Select.Option value="blue">Blue</Select.Option>
          </Select>
        </Form.Item>
        <Form.Item label="InputNumber">
          <Form.Item name="input-number" no-style>
            <InputNumber v-model:value="formState['input-number']" :min="1" :max="10" />
          </Form.Item>
          <span class="ant-form-text">machines</span>
        </Form.Item>
        <Form.Item name="switch" label="Switch">
          <Switch v-model:checked="formState.switch" />
        </Form.Item>
        <Form.Item name="slider" label="Slider">
          <Slider
            v-model:value="formState.slider"
            :marks="{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }"
          />
        </Form.Item>
        <Form.Item name="radio-group" label="Radio.Group">
          <Radio.Group v-model:value="formState['radio-group']">
            <Radio value="a">item 1</Radio>
            <Radio value="b">item 2</Radio>
            <Radio value="c">item 3</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item
          name="radio-button"
          label="Radio.Button"
          :rules="[{ required: true, message: 'Please pick an item!' }]"
        >
          <Radio.Group v-model:value="formState['radio-button']">
            <Radio.Button value="a">item 1</Radio.Button>
            <Radio.Button value="b">item 2</Radio.Button>
            <Radio.Button value="c">item 3</Radio.Button>
          </Radio.Group>
        </Form.Item>
        <Form.Item name="checkbox-group" label="Checkbox.Group">
          <Checkbox.Group v-model:value="formState['checkbox-group']">
            <Row>
              <Col :span="8">
                <Checkbox value="A" style="line-height: 32px">A</Checkbox>
              </Col>
              <Col :span="8">
                <Checkbox value="B" style="line-height: 32px" disabled>B</Checkbox>
              </Col>
              <Col :span="8">
                <Checkbox value="C" style="line-height: 32px">C</Checkbox>
              </Col>
              <Col :span="8">
                <Checkbox value="D" style="line-height: 32px">D</Checkbox>
              </Col>
              <Col :span="8">
                <Checkbox value="E" style="line-height: 32px">E</Checkbox>
              </Col>
              <Col :span="8">
                <Checkbox value="F" style="line-height: 32px">F</Checkbox>
              </Col>
            </Row>
          </Checkbox.Group>
        </Form.Item>
        <Form.Item name="rate" label="Rate">
          <Rate v-model:value="formState.rate" allow-half />
        </Form.Item>
        <Form.Item name="upload" label="Upload" extra="longgggggggggggggggggggggggggggggggggg">
          <Upload
            v-model:fileList="formState.upload"
            name="logo"
            action="/upload.do"
            list-type="picture"
          >
            <Button>
              <template #icon><UploadOutlined /></template>
              Click to upload
            </Button>
          </Upload>
        </Form.Item>
        <Form.Item label="Dragger">
          <Form.Item name="dragger" no-style>
            <Upload.Dragger v-model:fileList="formState.dragger" name="files" action="/upload.do">
              <p class="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p class="ant-upload-text">Click or drag file to this area to upload</p>
              <p class="ant-upload-hint">Support for a single or bulk upload.</p>
            </Upload.Dragger>
          </Form.Item>
        </Form.Item>
        <Form.Item :wrapper-col="{ span: 12, offset: 6 }">
          <Button type="primary" html-type="submit">Submit</Button>
        </Form.Item>
      </Form>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive } from 'vue';
  import { UploadOutlined, InboxOutlined } from '@ant-design/icons-vue';
  import Button from '@sscd/button';
  import Checkbox from '@sscd/checkbox';
  import { Col, Row } from '@sscd/grid';
  import InputNumber from '@sscd/input-number';
  import Radio from '@sscd/radio';
  import Rate from '@sscd/rate';
  import Select from '@sscd/select';
  import Slider from '@sscd/slider';
  import Switch from '@sscd/switch';
  import Upload from '@sscd/upload';
  import Form from '@sscd/form';
  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };
  const formState = reactive<Record<string, any>>({
    'input-number': 3,
    'checkbox-group': ['A', 'B'],
    rate: 3.5,
  });
  const onFinish = (values: any) => {
    console.log('Success:', values);
  };
  const onFinishFailed = (errorInfo: any) => {
    console.log('Failed:', errorInfo);
  };
</script>
